  @import "../../app.less";
  @import "../../iconfont/iconfont.wxss";

  .list_wrap {
    margin-top: 20rpx;

    .card_item {
      margin-bottom: 20rpx;
      background: white;
      padding: 20rpx;
      box-shadow: 0 0 2rpx 2rpx #f5f5f5;

      >view {
        margin-bottom: 20rpx;
      }

      .order_id_wrap {
        color: #aaa;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;

        .order_id {
          max-width: 60%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .create_at {
        }
      }

      .order_status_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .status_wrap {
          display: flex;
          align-items: center;

          .status_logo {
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background-color: @themeColor;
          }

          .status_text {
            margin-left: 20rpx;
            color: @themeColor;
          }
        }

        .total_price {
          color: @themeColor;

          .number {
          }
        }

      }

      .order_goods_wrap {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;

        .goods_name {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .goods_number {}
      }

      .order_user_wrap {

        display: flex;
        justify-content: space-between;

        .total_price {
          .big {
            font-size: 40rpx;
          }

          color: @themeColor;
        }

        .user_wrap {
          display: flex;
          align-items: center;

          .img {
            background-color: red;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
          }

          .name {
            margin-left: 10rpx;
            margin-right: 20rpx;
            color: black
          }
        }
      }

      .order_btn_wrap {
        display: flex;
        justify-content: flex-end;

        >view {
          border: 1rpx solid #ccc;
          padding: 10rpx 30rpx;
          border-radius: 10rpx;
          margin-left: 20px;
        }

        .delete_btn {
          color: crimson;
          border-color: crimson;
        }

        .pay_btn {
          border-color: @themeColor;
          color: @themeColor;
        }
      }
    }
  }

  .green {
    .status_logo {
      background-color: @green  !important;
    }

    .status_text,
    .total_price,
    .phone {
      color: @green  !important;
    }

  }

  .grey {
    color: #aaa;

    .status_logo {
      background-color: grey !important;
    }

    .status_text,
    .total_price,
    .phone {
      color: #999 !important;
    }

    .name {
      color: inherit !important;
    }
  }